<template>
  <el-popover placement="bottom" v-model="visible">
    <div class="stu-select-filter">
      <KeywordInput v-model="baseParam.keyWord" @enter="search()" placeholder="culture.profession.searchForProCodeOrname"/>
      <GradeSelect v-model="baseParam.grade" style="width:110px;" placeholder="label.grade" 
        :clearable="true" @change="search()"/>
      <el-button type="text" @click="setValue()" size="mini" class="float-right">{{$t('message.clear')}}</el-button>
      <div style="width:600px;margin-top: 4px;">
        <edu-table :data="dataList" :total="total" ref="tableRef" @page-change="onCurrentPageChange" 
          :pageSize="baseParam.pageSize_" 
          :order="false" :selection="false" :max-height="260" @refresh-click="search"
          paginationLayout="prev, pager, next" paginationStyle="" :paginationShowRefresh="true">
            <edu-table-column :min-width="60" :label="$t('label.grade')" prop="grade"/>
            <edu-table-column :label="$t('culture.profession.proCode')" prop="professionCode"/>
            <edu-table-column :label="$t('culture.profession.proCodeName')" prop="professionName" :min-width="120"/>
            <!-- <edu-table-column :min-width="100" :label="$t('culture.profession.proCodeNameEn')" prop="professionNameEn"/> -->
            <edu-table-column :label="$t('label.college')" prop="facultyI18n" :min-width="120"/>
            <edu-table-column :label="$t('label.trainingLevel')" prop="trainingLevelI18n"/>
            <edu-table-column :label="$t('label.operation')" :width="90">
              <template slot-scope="scope">
                <el-button type="text"  @click="select(scope.row)" size="mini" >{{$t('选择')}}</el-button>
              </template>
            </edu-table-column>
        </edu-table>
      </div>
    </div>
    <div slot="reference">
      <el-input class="select-input"  style="width:100%;" :readonly="readonly" @click="handlerClick"
        v-model="labelValue" :placeholder="$t('common.pla.pleaseSelect')" :title="labelValue">
          <i slot="suffix" class="el-input__icon el-icon-arrow-up" 
              :class="{'is-reverse': visible}"></i>
        </el-input>
    </div>
  </el-popover>


</template>
<script>
import {findCampusProfessionList} from "common/src/api/culture/campusProfession";
import UTILS from "common/src/utils/utils";
/**
 * 本科专业下拉框组件
 */
export default {
  name: "EduMajorBkSelect",
  props: {
    value: {required: true},
    clearable:{default: false},
    readonly: {default: true},
    valueKey: {default: 'professionCode'},
    queryParam: {default: () => {}},
    multiple: {default: false}, // 是否多选
    autoLoad: {default: false}, // 是否自动加载
    grade:{default:null},
    faculty:{default: ''},
    keyWord: {default: ''} // 专业回显
  },
  data() {
    return {
      dataList: [],
      labelValue: '',
      baseParam: {
        keyWord: '',
        grade: null,
        pageNum_: 1,
        pageSize_: 10,
      },
      visible: false,
      total: 0,
    }
  },
  mounted() {
    if(this.autoLoad){
      this.search();
    }
    if(this.keyWord) {
        this.baseParam.keyWord = this.keyWord
        this.search(this.keyWord)
      }
     
  },
  watch:{
    visible(val) {
      if (val) {
        this.search();
      }
      
    },
    value(val, oldVal) {
        if(!val){
          this.labelValue = '';
        }
    },
    faculty: {
      handler: function(newVal, oldVal) {
        if(UTILS.isNotEmpty(newVal)){
          if(!_.isEqual(newVal, oldVal)) {
            this.search();
          }
        }else{
          this.dataList = [];
          // this.setValue();原代码为这一行
          this.search();
        }
      }
    },
    grade:{
      handler(newVal, oldVal) {
        if(UTILS.isNotEmpty(newVal)){
          if(!_.isEqual(newVal, oldVal)) {
            this.baseParam.grade = newVal;
            this.search();
          }
        }
      }
    },
    queryParam(val, oldVal) {
        this.search();
    },
  },
  methods: {
    handlerClick(){
      this.visible = !this.visible;
    },
    select(stu){
      this.visible = false;
      this.setValue(stu);
    },
    setValue(m){
      this.labelValue = '';
      let value = '';
      
      if (this.baseParam.keyWord) {
        this.baseParam.keyWord = '';
      }
      
      if(m){
        value = m[this.valueKey];
        this.labelValue = m.professionName + "(" + m.professionCode + ")";
      }
      this.$emit("input", value);
      if(!_.isEqual(this.value, value)){
        this.$emit('change', value);
      }
      // this.search();
    },
    search(param) {
      let queryData = UTILS.clone(this.baseParam == null ? {} : this.baseParam);
      if(UTILS.isNotEmpty(this.faculty)){
        queryData.faculty = this.faculty;
      }
      if(_.isNil(queryData.pageSize_)) {
        queryData.pageSize_ = 10;
      }
      if(_.isNil(queryData.pageNum_)) {
        queryData.pageNum_ = 1;
      }
      queryData = _.extend(queryData, this.queryParam, param);
      findCampusProfessionList(queryData).then(res => {
        this.dataList = res.data.list;
        this.total = res.data.total_;
        if(this.value){
          _.forEach(this.dataList, m => {
            if(this.value == m[this.valueKey]){
              this.setValue(m);
            }
          });
        }
        this.$emit('load-done', this.dataList);
      });
    },
    onCurrentPageChange(pager) {
      this.baseParam.pageSize_ = pager.pageSize;
      this.baseParam.pageNum_ = pager.pageNum;
      this.search();
    },
  },
  created() {
    if (this.multiple && !Array.isArray(this.value)) {
        this.$emit("input", []);
    }
    if (!this.multiple && Array.isArray(this.value)) {
        this.$emit("input", "");
    }
  },
};

</script>

<style lang="scss" scoped>
.stu-select-filter{
  .select-input{
    input{
      cursor: pointer;
    }
  }
}
.el-input__icon.el-icon-arrow-up{
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  transition: transform .3s,-webkit-transform .3s;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
  &.is-reverse{
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0);
  }
}
</style>